<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>rolePermission.jsp</title>
	<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<style>
* {
	padding:0;
	margin:0;
}
.wrap {
	width:300px;
	margin:20px auto 0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
	border:1px solid #c0c0c0;
	width:300px;
}
th,td {
	border:1px solid #d0d0d0;
	color:#404060;
	padding:10px;
}
th {
	background-color:#09c;
	font:bold 16px "微软雅黑";
	color:#fff;
}
td {
	font:14px "微软雅黑";
}
tbody tr {
	background-color:#f0f0f0;
}
tbody tr:hover {
	cursor:pointer;
	background-color:#fafafa;
}
.button{
    display:inline-block;
    text-decoration:none;
    font:bold 12px/12px HelveticaNeue, Arial;
    padding:8px 11px;
    color:#555;
    border:1px solid #dedede;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
	cursor:pointer;
}
.button.grey{
    background:#bdbdbd;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#aeaeae'); /*  IE */
    background:-webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#aeaeae)); /*  WebKit */
    background:-moz-linear-gradient(top,  #cacaca, #aeaeae);
    border-color:#b5b5b5 #a1a1a1 #8f8f8f;
    color:#555;
    text-shadow:0 1px 0 #d4d4d4;
    -webkit-box-shadow:0 1px 1px #c9c9c9, inset 0 1px 0 #d7d7d7;
    -moz-box-shadow:0 1px 1px #c9c9c9, inset 0 1px 0 #d7d7d7;
    box-shadow:0 1px 1px #c9c9c9, inset 0 1px 0 #d7d7d7;    
}
</style>
</head>
<body>



   <div style="float: left;margin-left: 40px;">
   <h4> 请选择用户： <select name="userid" id="userOption" style="width:90px;height:25px;">
           <option id="" value="">请选择</option>
           </select></h4>
     <h4>给用户分配角色：</h4>
     <div style="margin-left: 250px; overflow:scroll; height:400px;" id="rolesInput">
     </div>      
    <div style="text-align:right;"><button class="button grey" onclick="editPermissionToRole()">确定</button></div>  
    </div> 

</body>
<script type="text/javascript">
$("body").ready(function() {
	     $.ajax({
	     url : "${pageContext.request.contextPath}/userRole",//请求地址
	     dataType : "json",//数据格式 
	     type : "post",//请求方式
	     async : true,//是否异步请求
	     success : function(data) {
	    	 var roleData = data.roleList;
	    	 var userData = data.userList;
	    	 //如何发送成功
	        var rolesInput="<table><thead><tr><th><input type='checkbox' id='j_cbAll'></th><th>角色</th></tr></thead><tbody id='j_tb'>";
	    	  for(var i=0;i<roleData.length;i++){    //遍历data数组
	    	      rolesInput +="<tr><td><input name='roles' value='"+roleData[i].id+"' id='role"+i+"' style='height: 20px; width: 30px;' type='checkbox'>"+"</td><td>"+roleData[i].rolename+"</td></tr>";      
	    	  }
	    	  rolesInput +="</tbody></table>"; 
	    	  $("#rolesInput").html(rolesInput);
	    	 //右边的选择框
	    	var userOption="<option id='' value=''>请选择</option>";
	        for(var j=0;j<userData.length;j++){
	        	 userOption +="<option value="+userData[j].id+"+>"+userData[j].username+"</option>";
	        }
	         $("#userOption").html(userOption); 
	     },
	 });
  });
  
$("#userOption").on("change",function(){
	//右边的
	var userid= $("#userOption option:selected").val();
	for(var i=0;i<$('input[id^="role"]').length;i++){
	 $('#role'+i).prop("checked",false);
		   
 	}
	if(userid!=null&&userid>0){
	$.ajax({
	     url : "${pageContext.request.contextPath}/getuseridToQuery?userid="+userid,//请求地址
	     dataType : "json",//数据格式 
	     type : "get",//请求方式
	     async : false,//是否异步请求
	     success :function(data) {
	    	  var m=0;
	    	 while(m<data.length){
	    		for(var i=0;i<$('input[id^="role"]').length;i++){
	    		   if($('#role'+i).val()==data[m].gyPermission.id){
	    			   $('#role'+i).prop("checked",true);
	    		   }
		    	}
	    		m++;
	    	} 
	     },
	 });
	}
});




//点击右边角色
function editPermissionToRole(){
	//获取需要修改role的id
	var uid= $("#userOption option:selected").val();
    //alert(uid);
	//获取需要修改的权限的ids
    var parentBox = document.getElementById("rolesInput");
	var inputs = parentBox.getElementsByTagName("input");
	var roleids=new Array();
	  for(var i=0,j=0;i<inputs.length;i++){  
		  if(inputs[i].type=="checkbox"&&inputs[i].checked)   {  
			  roleids[j]=$(inputs[i]).val();
			  j++;
			  }}
	  //alert(roleids);
  //发送Ajax语句
  $.ajax({
	  url:"${pageContext.request.contextPath}/roleToUser?uid="+uid+"&roleids="+roleids,
	  type:"get",
	  async:false,
	  success:function(data){
		  alert(data);
	  },
	  
  });
}
</script>

</html>